<template>
  <div class="login">
<!-- 登陆页面 -->
<!-- <router-view /> -->
<van-nav-bar
  title="登陆"
  class="page-nav-bar"
/>

<!-- ref被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上 -->
<van-form @submit="onSubmit" ref="form">
  <van-field
    v-model="form.mobile"
    name="mobile"
    placeholder="请输入手机号"
    :rules="[
{required:true,message:'请输入手机号'},
{pattern:/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,message:'手机号码格式不正确'}
    ]"
  >
  <template #left-icon>
<i class="toutiao toutiao-shouji"></i>
  </template>
  </van-field>

  <van-field
    v-model="form.code"
    name="code"
    placeholder="请输入验证码"
        :rules="[
{required:true,message:'请输入验证码'},
{pattern:/^[0-9]{6}$/,message:'验证码码格式不正确'}
    ]"
  >
   <template #left-icon>
<i class="toutiao toutiao-yanzhengma"></i>
  </template>
  <template #button>
    <!-- 用的button里的small按钮 -->
    <!-- native-type 是组件里下面 自定义原生 button 标签的 type 属性 -->
    <!-- 验证码倒计时 -->
<van-count-down v-if="isShowCountDown" :time= "6 * 1000" format="ss s" />
<van-button v-else @click="onSend" class="send-btn" size="small" type="primary" native-type="button">发送验证码</van-button>

  </template>
  </van-field>

  <div style="margin: 16px;">
    <van-button class="login-btn" round block type="info" native-type="submit">提交</van-button>
  </div>
</van-form>
<!-- </van-field> -->
  </div>
</template>

<script>
import { getCode, login } from '@/api/user'
import { Toast } from 'vant'

export default {
  data () {
    return {
      form: {
        mobile: '',
        code: ''
      },
      // time: 60 * 1000
      isShowCountDown: false// 是否显示倒计时
    }
  },

  created () {

  },

  methods: {
    // onSubmit () {
    //   console.log('提交表单')
    //   login(this.from)
    // },

    async onSubmit () {
      try {
        const res = await login(this.form)
        console.log(res)
        // 重要：存的是data{}
        // 存的不是data里面的token
        this.$store.commit('initUser', res.data.data)// initUser是store里的mutations方法的调用名字  payload是形参
        this.$router.push('/profile')
      } catch (err) {
        console.dir(err)
        Toast.fail('登陆失败')
      }
      console.log(this.form)
    },
    // 点击发送验证码
    async onSend () {
      // 点击发送验证码
      // validate是一个验证表单的方法， 支持传入name来验证单个或部分表单项
      //  通过 ref 可以获取到 Form 实例并调用实例方法
      try {
        await this.$refs.form.validate('mobile')
        // console.log('获取手机号，发送验证码')
        await getCode(this.form.mobile)
        this.isShowCountDown = true
        Toast.success('发送成功')
      } catch (err) {
        if (err.response && err.response.status === 429) { return Toast.fail('发送频繁，稍后再试') }
      }
      console.log('网络异常')
      // console.dir(err)
    }
  }
}
</script>

<style scoped lang='less'>
.login{
  .login-btn{
    width: 694px;
    height: 88px;
    background-color: #6db4fb;
    border: none;
    border-radius: 10px;
  }
  .toutiao{
    font-size: 37px;
  }
  .send-btn{
width: 152px;
height: 46px;
background: #EDEDED;
border: none;
border-radius: 23px;
padding: 0;
font-size: 22px;
color: #666666;
  }
}

</style>
